<template>
  <div class="course-container">
    <!-- 头部信息区 -->
    <div class="header-section">
      <h1 class="dynamic-title">
        <i class="el-icon-notebook-2"></i>
        我的学习档案
      </h1>
      <div class="student-badge">
        <el-tag type="success" effect="dark">{{ studentInfo.name }}</el-tag>
        <el-tag type="info">{{ studentInfo.no }}</el-tag>
      </div>
    </div>

    <!-- 警示信息 -->
    <el-alert 
      title="选课规则提醒" 
      type="warning" 
      :closable="false"
      class="rule-alert"
    >
      <template #default>
        <span class="alert-text">
          <i class="el-icon-warning"></i>
          重要提示：每个培训周期仅允许选择一门主修课程
        </span>
      </template>
    </el-alert>

    <!-- 课程信息卡片 -->
    <div class="course-grid">
      <transition-group name="card-fade">
        <el-card 
          v-for="(course, index) in courses"
          :key="index"
          class="animated-card"
          :style="cardStyle(index)"
          shadow="hover"
        >
          <template #header>
            <div class="card-header">
              <div class="course-direction">
                <i class="el-icon-aim"></i>
                {{course.endDate<getCurrentDate() ? '修行完成' : '正在进修'}}
              </div>
              <el-tag 
                :type="violationTagType(course)"
                effect="light"
                round
              >
                违纪记录: {{ course.violationCount }}次 ({{ course.violationScore }}分)
              </el-tag>
            </div>
          </template>

          <div class="course-details">
            <div class="detail-item">
              <el-icon><OfficeBuilding /></el-icon>
              <span class="label">班级：</span>
              <span class="highlight-text">{{ course.clazzName }}</span>
            </div>
            <el-divider class="divider" />
            <div class="detail-item">
              <el-icon><Location /></el-icon>
              <span class="label">教室：</span>
              {{ course.room }}
            </div>
            <div class="detail-item">
              <el-icon><User /></el-icon>
              <span class="label">班主任：</span>
              <span class="teacher-name">{{ course.masterName }}</span>
            </div>
            <el-timeline class="timeline">
              <el-timeline-item
                placement="top"
                :timestamp="course.beginDate"
                color="#67C23A"
              >
                启航日
              </el-timeline-item>
              <el-timeline-item
                placement="top"
                :timestamp="course.endDate"
                color="#F56C6C"
              >
                结业日
              </el-timeline-item>
            </el-timeline>
              <el-divider class="divider" />
              <div class="message-section">
                <el-input
                  v-model="course.message"
                  type="textarea"
                  :rows="3"
                  placeholder="留下你的课程感悟（200字以内）"
                  maxlength="200"
                  show-word-limit
                  class="message-input"
                />
                <el-button
                  type="primary"
                  class="button"
                  size="small"
                  @click="submitMessage(course)"
                >
                  提交
                </el-button>
              </div>
          </div>
        </el-card>
      </transition-group>
    </div>

    <!-- 动态寄语 -->
    <div class="inspiration-panel">
      <div class="quote-bg">
        <div class="quote-content">
          <h3 class="quote-title">🌌 致代码世界的探索者：</h3>
          <p class="animated-quote">
            <span class="quote-text">
              "每个<span class="gradient-text">BUG</span>都是通往精通的阶梯<br>
              每行<span class="gradient-text">代码</span>都在构建数字世界的星辰大海<br>
              让<span class="highlight">逻辑</span>成为你的指南针<br>
              用<span class="highlight">创造力</span>绘制未知的版图<br>
              记住，<span class="blink">坚持</span>是破解难题的最佳算法！<br>
              <span style="font-size: 1.2em;">🚀 你的下一行代码，可能改变世界 🌍"</span>
            </span>
          </p>
          <div class="signature">
            <el-divider content-position="right">—— 一直陪着你的小默</el-divider>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import { Location, User, OfficeBuilding } from '@element-plus/icons-vue'
import { queryStuLogApi,updateStuLogApi } from '@/api/student'
import { ElMessage } from 'element-plus'

const activeIndex = ref(-1)



const studentInfo = ref({
  name: '张三',
  no: '20230001'
});

const courses = ref([
    {
      name: "",
      no: "",
      clazzName: "",
      room: "",
      masterName: "",
      beginDate: "",
      endDate: "",
      violationCount: 0,
      violationScore: 0
    }
]);

// 动态卡片样式
const cardStyle = (index) => computed(() => ({
  transform: activeIndex.value === index ? 'perspective(1000px) rotateY(5deg)' : 'none',
  boxShadow: activeIndex.value === index ? 
    '0 15px 30px rgba(64,158,255,0.2)' : 
    '0 5px 15px rgba(0,0,0,0.1)'
}))

// 违纪标签样式
const violationTagType = (course) => {
  if(course.violationScore >= 10) return 'danger'
  if(course.violationScore >= 5) return 'warning'
  return 'success'
}

function getCurrentDate() {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

const searchStudentInfo=()=>{
  studentInfo.value.name=JSON.parse(localStorage.getItem('Student')).name;
  studentInfo.value.no=localStorage.getItem('no');
}
const search= async ()=>{
  const result= await queryStuLogApi(studentInfo.value.no);
  if(result.code){
    courses.value=result.data;
  }
};

onMounted(()=>{
  searchStudentInfo();
  search();
})

const submitMessage= async (course)=>{
  const result= await updateStuLogApi(course);
  if(result.code){
    ElMessage.success('留言成功');
  }else{
    ElMessage.error(result.msg);
  }
}

</script>

<style scoped>
.button{
  margin-top: 10px;
}

/* 新增留言框样式 */
.message-section {
  margin-top: 1.5rem;
  position: relative;
}

.message-input {
  font-size: 0.95rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.message-input:deep(.el-textarea__inner) {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 12px;
}

.message-input:deep(.el-input__count) {
  background: transparent;
  color: #909399;
  bottom: 5px;
  right: 10px;
}

/* 调整卡片内部分隔线间距 */
.course-details .divider {
  margin: 1.2rem 0;
}

.course-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: 100vh;
  padding: 2rem;
}

/* 头部样式 */
.header-section {
  text-align: center;
  margin-bottom: 2rem;
}

.dynamic-title {
  font-size: 2.8rem;
  color: #2c3e50;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { text-shadow: 0 0 10px rgba(64,158,255,0.3); }
  to { text-shadow: 0 0 20px rgba(64,158,255,0.5); }
}

.student-badge {
  margin-top: 1rem;
  & .el-tag { margin: 0 0.5rem; }
}

/* 警示条 */
.rule-alert {
  margin: 2rem auto;
  max-width: 800px;
  border-radius: 8px;
  .alert-text {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    i { margin-right: 8px; }
  }
}

/* 课程卡片 */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.animated-card {
  background: rgba(255,255,255,0.95);
  border-radius: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  &:hover {
    transform: translateY(-5px) scale(1.02);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  .course-direction {
    font-size: 1.2rem;
    color: #409EFF;
    i { margin-right: 8px; }
  }
}

.course-details {
  padding: 1rem;
  .detail-item {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    font-size: 1.1rem;
    .label { 
      color: #666;
      margin: 0 8px;
    }
    .highlight-text {
      color: #303133;
      font-weight: 500;
    }
  }
  .teacher-name {
    color: #E6A23C;
    font-weight: bold;
  }
}

/* 时间线样式 */
.timeline {
  margin-top: 1.5rem;
  :deep(.el-timeline-item__timestamp) {
    color: #909399;
    font-size: 0.9rem;
  }
}

/* 寄语面板 */
.inspiration-panel {
  margin: 4rem auto;
  max-width: 800px;
  .quote-bg {
    background: linear-gradient(45deg, #ffffff, #f8f9fa);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  }
}

.quote-title {
  color: #2c3e50;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.animated-quote {
  font-size: 1.2rem;
  line-height: 2;
  text-align: center;
  position: relative;
  .gradient-text {
    background: linear-gradient(45deg, #409EFF, #67C23A);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
  }
  .highlight {
    color: #E6A23C;
    font-weight: 500;
  }
}

.blink {
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.signature {
  margin-top: 2rem;
  :deep(.el-divider__text) {
    background: transparent;
    font-style: italic;
    color: #909399;
  }
}

/* 过渡动画 */
.card-fade-enter-active,
.card-fade-leave-active {
  transition: all 0.5s ease;
}
.card-fade-enter-from,
.card-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
/* 移动端适配 */
@media (max-width: 768px) {
  .course-container {
    padding: 1rem;
  }

  .header-section {
    margin-bottom: 1.5rem;
  }

  .dynamic-title {
    font-size: 1.5rem;
    flex-direction: column;
    text-align: center;
    animation: none;
    i {
      margin-bottom: 0.5rem;
    }
  }

  .student-badge {
    flex-wrap: wrap;
    gap: 0.5rem;
    .el-tag {
      font-size: 0.8rem;
      padding: 4px 8px;
    }
  }

  .rule-alert {
    margin: 1rem 0;
    :deep(.el-alert__content) {
      padding: 8px;
    }
    .alert-text {
      font-size: 0.9rem;
    }
  }

  .course-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1rem 0;
  }

  .animated-card {
    border-radius: 12px;
    margin: 0 0.5rem;
    &:hover {
      transform: none;
    }
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    .course-direction {
      font-size: 1rem;
    }
    .el-tag {
      width: 100%;
      justify-content: center;
      font-size: 0.8rem;
    }
  }

  .course-details {
    padding: 0.8rem;
    .detail-item {
      font-size: 0.9rem;
      margin: 0.8rem 0;
      .el-icon {
        font-size: 1.1rem;
      }
    }
  }

  .timeline {
    :deep(.el-timeline-item__timestamp) {
      font-size: 0.75rem !important;
    }
  }

  .message-input {
    :deep(.el-textarea__inner) {
      font-size: 0.85rem;
      padding: 8px;
    }
  }

  .inspiration-panel {
    margin: 2rem 0;
    .quote-bg {
      padding: 1.5rem;
    }
    .quote-title {
      font-size: 1.2rem;
    }
    .animated-quote {
      font-size: 0.95rem;
      line-height: 1.8;
      br { display: none; }
    }
  }

  /* 按钮优化 */
  .button {
    width: 100%;
    margin-top: 0.8rem;
    padding: 8px 16px;
  }
}

/* 小屏手机优化 */
@media (max-width: 480px) {
  .dynamic-title {
    font-size: 1.3rem;
  }

  .course-details {
    .teacher-name {
      font-size: 0.85rem;
    }
  }

  .el-timeline-item__content {
    font-size: 0.8rem !important;
  }

  .inspiration-panel {
    .quote-title {
      font-size: 1.1rem;
    }
    .animated-quote {
      font-size: 0.85rem;
    }
  }
}
</style>